<template>
	<view class="container">
		<view class="title">订单流程</view>
		<v-steps :steps="steps" :active="activeStep" direction="horizontal" />

		<view class="title">注册流程</view>
		<v-steps :steps="steps" :active="activeStep" direction="vertical" class="vertical-steps" />

		<view class="controls">
			<v-button type="info" model="circle" @click="prevStep">上一步</v-button>
			<v-button model="circle" @click="nextStep">下一步</v-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const activeStep = ref(0);
const steps = ref([
	{ title: '选择商品', desc: '挑选心仪商品' },
	{ title: '填写信息', desc: '收货地址和联系方式' },
	{ title: '支付订单', desc: '选择支付方式' },
	{ title: '完成订单', desc: '等待发货' }
]);

const prevStep = () => {
	if (activeStep.value > 0) activeStep.value--;
};

const nextStep = () => {
	if (activeStep.value < steps.value.length - 1) activeStep.value++;
};
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
	background: linear-gradient(135deg, #f5f7fa, #e4e7ed);
	min-height: 100vh;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #2c3e50;
	margin: 30rpx 0 20rpx;
	padding-left: 20rpx;
	border-left: 8rpx solid #2979ff;
}

.vertical-steps {
	margin-top: 40rpx;
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.controls {
	display: flex;
	justify-content: space-around;
	margin-top: 60rpx;
}
</style>
